import { Component } from 'react';
import './Tab.css'
class Tab extends Component {
    constructor(props) {
        super()
        this.state = {
            current: 0
        }
    }
    render() {
        return (
        <div className="Tab">
            <ul>
                {
                    this.props.list.map((item, i) => {
                        return <li key={i}
                            onClick={
                                () => {
                                    this.setState({
                                        current: i
                                    })
                                    this.props.fn(item.status)
                                }
                            }
                            style={
                                {
                                    color: this.state.current === i ? '#fff' : '#333',
                                    background: this.state.current === i ? 'blue' : '#fff',
                                }
                            }
                        >{item.name}</li>
                    })
                }
            </ul>
        </div>
        );
    }
}
export default Tab;